/**
 * QuickActionCard - Interactive Quick Action Card
 * 
 * Features:
 * - Hover animations
 * - Icon + Title + Description
 * - Click handler support
 */

import { motion } from 'motion/react';
import { LucideIcon } from 'lucide-react';
import { cn } from '@/lib/utils';

interface QuickActionCardProps {
  icon: LucideIcon;
  title: string;
  description?: string;
  onClick?: () => void;
  className?: string;
}

export function QuickActionCard({ 
  icon: Icon, 
  title, 
  description,
  onClick,
  className 
}: QuickActionCardProps) {
  return (
    <motion.button
      onClick={onClick}
      whileHover={{ 
        scale: 1.02,
        y: -2,
      }}
      whileTap={{ scale: 0.98 }}
      className={cn(
        "group relative p-6 rounded-xl bg-card border border-border",
        "hover:border-primary/50 hover:shadow-lg",
        "transition-all duration-200",
        "text-left w-full",
        className
      )}
    >
      {/* Gradient overlay on hover */}
      <div className="absolute inset-0 rounded-xl bg-gradient-to-br from-primary/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
      
      <div className="relative">
        {/* Icon */}
        <div className="mb-3 w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center group-hover:bg-primary/20 transition-colors">
          <Icon className="w-6 h-6 text-primary" />
        </div>
        
        {/* Title */}
        <h3 className="text-base font-semibold mb-1">{title}</h3>
        
        {/* Description */}
        {description && (
          <p className="text-sm text-muted-foreground">
            {description}
          </p>
        )}
      </div>
    </motion.button>
  );
}

